<template>
	<section class="bgwhite">
		<div class="header pb50" :style="{backgroundImage: 'url(./static/imgs-activity/recommend2.png)'}">
            <router-link to="/" class="back">
                <span class="iconfont icon-fanhuizuo"></span>
                <span>首页</span>
            </router-link>
            <div class="pt40 pl30 pr30">
				<img :src="require('@images-activity/recommend1.png')" alt>
			</div>
			<ul class="ml20 mr20 mt40 pt50 pb50 pl30 pr30">
				<li class="br4">
					<mt-field
						label="手机号"
						:attr="{ maxlength: 11 }"
						:state="phone&&phone.length==11?'success':'default'"
						placeholder="请输入手机号"
						type="tel"
						v-model="phone"
					></mt-field>
				</li>
				<li class="br4 mt20">
					<mt-field
						label="验证码"
						:attr="{ maxlength: 6 }"
						:state="yzm&&yzm.length==6?'success':'default'"
						placeholder="请输验证码"
						type="text"
						v-model="yzm"
					>
						<span @click="getMsg">
							<mt-button :type="phone.length==11?'primary':'default'" size="small">验证码</mt-button>
						</span>
					</mt-field>
				</li>
				<li class="br4 mt20">
					<mt-field
						label="密码"
						:state="password&&password.length>=6?'success':'default'"
						placeholder="请设置密码"
						type="password"
						v-model="password"
					></mt-field>
				</li>
				<li class="br4 mt20" ref="tuiGuang">
					<mt-field label="推广码" placeholder="没有可不填" type="text" v-model="tuiGuangCode"></mt-field>
				</li>
				<li class="mt50" @click="register">
					<mt-button size="large" type="primary">立即注册</mt-button>
				</li>
			</ul>
		</div>
		<div class="ml20 mr20">
			<div class="pl50 pr50 pt50 pb40 wow slideInRight">
				<img :src="require('@images-activity/recommend3.png')" alt>
			</div>

			<!-- 品种齐全 -->
			<div class="wow slideInLeft">
				<img :src="require('@images-activity/recommend4.png')" alt>
			</div>
			<div class="pl50 pr50 pt20 wow slideInRight">
				<img :src="require('@images-activity/recommend5.png')" alt>
			</div>
			<!-- 充提快速 -->
			<div class="mt30 wow slideInLeft">
				<img :src="require('@images-activity/recommend6.png')" alt>
			</div>
			<div class="pl50 pr50 pt20 wow slideInRight">
				<img :src="require('@images-activity/recommend7.png')" alt>
			</div>
			<!-- 交易便捷 -->
			<div class="mt30 wow slideInLeft">
				<img :src="require('@images-activity/recommend8.png')" alt>
			</div>
			<div class="pl50 pr50 pt30 wow slideInRight">
                <div class="pl50 pr50"><img :src="require('@images-activity/recommend9.png')" alt></div>
			</div>
			<!-- 直播教学 -->
			<div class="wow slideInLeft">
				<img :src="require('@images-activity/recommend10.png')" alt>
			</div>
			<div class="pl50 pr50 pt30 wow slideInRight">
                <div class="pl50 pr50"><img :src="require('@images-activity/recommend11.png')" alt></div>
			</div>
			<!-- 资金安全 -->
			<div class="mt30 wow slideInLeft">
				<img :src="require('@images-activity/recommend12.png')" alt>
			</div>
			<div class="pl50 pr50 pt20 wow slideInRight">
				<img :src="require('@images-activity/recommend13.png')" alt>
			</div>
			<!-- 最新资讯 -->
			<div class="mt30 wow slideInLeft">
				<img :src="require('@images-activity/recommend14.png')" alt>
			</div>
		</div>
        <div class="pl50 pr50 wow slideInRight">
            <div class="tl bggray pl20 pr20 pt20 pb20 mt20 br4" v-for="(item,i) in trade" :key="i">
                <p class="fs14 lh20">{{item.title}}</p>
                <p class="fs12 fontc4 mt5">{{item.createTime}}</p>
            </div>
        </div>
	</section>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import MD5 from '@/tools/md5.js'
import {WOW} from 'wowjs';

export default {
	name: 'TuiGuangSign',
	data() {
		return {
			phone: '',
			yzm: '',
			str: '',
			password: '',
			regImageCode: '',
			tuiGuangCode: '',
			yzmKey: true,
            registerkey: true,
            trade: [],
		}
	},
	mounted() {
        this.getPromte()
        this.getTrade()
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true
        });
        wow.init();
	},
	methods: {
		getPromte() {
            // 获取推广员信息
			const code = this.$route.query.abc || localStorage.getItem("promoterCode") || cookie.getCookie('promoterCode')
			if (code) {
				this.$refs.tuiGuang.style.display = 'none'
                this.tuiGuangCode = code
                localStorage.setItem('promoterCode',code)
                cookie.setCookie('promoterCode', code)
			}
		},
		getMsg() {
			if (this.phone.length != 11 || !this.yzmKey) {
				Toast('手机号码不正确')
				return
			}
			this.yzmKey = false
			Indicator.open({
				text: '请稍候...',
				spinnerType: 'fading-circle'
			})
			axios({
				method: 'post',
				url: '/user/user/getRegCode.do',
				params: {
					userPhone: this.phone,
					regImageCode: this.regImageCode
				}
			})
				.then(res => {
					Indicator.close()
					res = res.data
					//600说明图片验证码错误；
					//601需要输入验证码；
					if (res.code == 601) {
						//601时需要输入验证码
						//读取图片验证码
						MessageBox.prompt('<img src=' + '/user/user/getRegImage.do?userPhone=' + this.phone + '&_=' + new Date().getTime() + ' height="45" width="94">', '请您先填写下面数字').then(({ value, action }) => {
							//保存验证码
							this.regImageCode = value.replace(/\s+/g, '')
							//确认以后再次调短信接口
							this.getMsg()
						})
					} else {
					}
					Toast(res.msg)
				})
				.then(() => {
					this.regImageCode = ''
					Indicator.close()
					this.yzmKey = true
				})
				.catch(() => {
					this.regImageCode = ''
					Indicator.close()
					Toast('请求了错')
					this.yzmKey = true
				})
		},
		register() {
			if (this.phone.length != 11) {
				Toast('手机号码不正确')
				return
			}
			if (this.password.length < 6) {
				Toast('密码长度须大于6位')
				return
			}
			this.registerkey = false
			Indicator.open()

			//环境检测

			const agent = navigator.userAgent
			const isAndroid = agent.indexOf('Android') > -1 || agent.indexOf('Adr') > -1 //android终端
			const isIos = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
			const isIosNative = agent.toLowerCase().indexOf('safari') <= -1

			var prams
			if (isIosNative) {
				prams = 'native'
			} else if (isIos) {
				prams = 'ios'
			} else if (isAndroid) {
				prams = 'Android'
			} else {
				prams = 'other'
			}
			axios({
				method: 'post',
				url: '/user/user/register.do',
				params: {
					userPhone: this.phone,
					userPass: MD5().hex(this.password),
					regCode: this.yzm,
					promoterCode: this.tuiGuangCode,
					source: prams + ',' + storage.getItem('source'),
				}
			})
				.then(res => {
					storage.setItem('userPhone', this.phone)
					res = res.data
					if (res.code == 200) {
						MessageBox.alert(res.msg, '用户注册').then(() => {
							this.$router.push({
								path: '/'
							})
						})
					} else {
						MessageBox.alert(res.msg, '用户注册')
					}
				})
				.then(() => {
					Indicator.close()
					this.registerkey = true
				})
        },
        getTrade() {
			axios({
				methods: 'get',
				url: '/user/news/findNewsList.do',
				params: {
					type: 3,
					offset: 0,
					size: 3
				}
			}).then(res => {
				res = res.data
				if (res.code === 200) {
					this.trade = res.data
				}
			})
		},
		goBack() {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
		}
	}
}
</script>
<style scoped lang='scss'>
.back{
    position: absolute;
    left: rem(10px);
    font-size: rem(14px);
    color: #fff;
}
.header {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.bg {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
ul {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 20px;
}
</style>
